<template>
    <div class="page-invite-guide">
        <div class="p-header"><img :src="hImg"></div>
        <div class="p-wrap">
            <div class="p-section-box">
               <div class="title">
                  <h1>发送链接给朋友/家人</h1>
                  <p>优选金融首页，点击好友返利活动，分享给好友</p>
                  <div class="number">1</div>
               </div>
               <div class="img-explain ie-1">
                  <div><img :src="guide1" class="img-guide-1"></div>
                  <div><img :src="guide2" class="img-guide-2"></div>
               </div>
               <p class="p-sub">可以分享到大量用户的地方，让更多的人看见，比如微博/ 微信朋友圈/贴吧及理财论坛</p>
               <div class="img-explain ie-2">
                  <div><img :src="guide3" class="img-guide-3"></div>
                  <div><img :src="guide4" class="img-guide-4"></div>
               </div>
            </div>
            <div class="p-section-box">
              <div class="title">
                  <h1>当面给朋友/家人扫</h1>
                  <p>优选金融首页，点击当面邀请按钮</p>
                  <div class="number">2</div>
               </div>
               <div class="img-explain ie-3">
                  <div><img :src="guide5" class="img-guide-5"></div>
                  <div><img :src="guide6" class="img-guide-6"></div>
               </div>
            </div>
            <div class="p-section-box">
              <div class="title">
                  <h1>通知朋友平台活动及福利</h1>
                  <p>平台不定期推出各种优惠活动，通知朋友一起玩</p>
                  <div class="number">3</div>
               </div>
               <div class="img-explain ie-4">
                  <div><img :src="guide7" class="img-guide-7"></div>
               </div>
            </div>
            <div class="p-btn-share" @click="Jump"><p>去活动页分享</p></div>
            <div class="p-logo"><img :src="guideLogo" class="img-guide-logo"></div>
        </div>
    </div>
</template>

<script>
export default {
  name: "inviteGuide",
  data() {
    return {
      msg: "Welcome to Your aboutUs",
      hImg: require("../../public/imgs/invite/img-guide-header.png"),
      guide1: require("../../public/imgs/invite/img-guide-1.png"),
      guide2: require("../../public/imgs/invite/img-guide-2.png"),
      guide3: require("../../public/imgs/invite/img-guide-3.png"),
      guide4: require("../../public/imgs/invite/img-guide-4.png"),
      guide5: require("../../public/imgs/invite/img-guide-5.png"),
      guide6: require("../../public/imgs/invite/img-guide-6.png"),
      guide7: require("../../public/imgs/invite/img-guide-7.png"),
      guideLogo: require("../../public/imgs/invite/img-guide-logo.png")
    };
  },
  mounted() {
    console.log(this);
    this.Uitis.setTitle("学会这3招，收入轻松破万");
  },
  methods: {
    Jump() {
      //alert("aa")
      //var host = `${this.Interface.getH5}/inviteInfo.html`;
      this.Uitis.JumpNavite("jumpToBack");
    }
  }
};
</script>

<style lang="less" scoped>
.page-invite-guide {
  box-sizing: border-box;
  .p-wrap {
    padding: 0 20px;
    background: #5062f7;
  }
  .p-section-box {
    background: #4655d2;
    padding: 45px 0 75px;
    margin-bottom: 20px;
    border-radius: 10px;
    .title {
      margin: 0 40px;
      padding-left: 75px;
      position: relative;
      .number {
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 100px;
        height: 100px;
        line-height: 100px;
        color: #FFF;
        font-weight: bold;
      }
      h1 {
        font-size: 36px;
        color: #FFF;
      }
      p {
        font-size: 26px;
        color: #FFF;
        margin-top: 15px;
      }
    }
    .p-sub {
      margin: 75px 24px;
      line-height: 1.4;
      font-size: 26px;
      color: #FFF;
    }
    .img-explain {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
    }
  }
  .ie-1 {
    margin-top: 50px;
  } 
  .ie-3 {
    margin-top: 95px;
  }
  .ie-4 {
    margin-top: 35px;
  }
  .p-btn-share {
    margin-top: 35px;
    background: #feca4e linear-gradient(#ffe762,#ffad3d);
    width: 100%;
    height: 100px;
    color: #333;
    font-size: 36px;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .img-guide-1 {
    width: 274px;
  }
  .img-guide-2 {
    width: 263px;
  }
  .img-guide-3,
  .img-guide-4,
  .img-guide-5,
  .img-guide-6 {
    width: 247px;
  }
  .img-guide-7 {
    width: 603px;
  }
  .p-logo {
    padding: 40px 0;
    text-align: center;
    .img-guide-logo {
      width: 175px;
    }
  }
}
</style>
